<template>
  <div class="index">
    <div class="logo">
      <img src="../assets/images/logo.png" />
    </div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
      class="content"
    >
      <div class="search">
        <van-search @focus="jumpSearch" placeholder="请输入搜索关键词" />
      </div>
      <div class="banner" v-if="indexData && indexData.banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in indexData.banner" :key="item.id">
            <img :src="item.pic" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="menus" v-if="indexData && indexData.menus">
        <van-grid :border="false" :column-num="4" clickable>
          <van-grid-item icon="apps-o" text="商品分类" to="/category" />
          <van-grid-item
            icon="coupon-o"
            text="领优惠券"
            @click="$toast('功能维护中')"
          />
          <van-grid-item
            icon="newspaper-o"
            text="行业资讯"
            @click="$toast('功能维护中')"
          />
          <van-grid-item
            icon="calendar-o"
            text="我要签到"
            @click="$toast('功能维护中')"
          />
          <van-grid-item
            icon="goods-collect-o"
            text="我的收藏"
            to="/collect/list"
          />
          <van-grid-item
            icon="gift-o"
            text="秒杀活动"
            @click="$toast('功能维护中')"
          />
          <van-grid-item icon="logistics" text="地址列表" to="/address/list" />
          <van-grid-item
            icon="balance-list-o"
            text="订单列表"
            to="/order/list/0"
          />
        </van-grid>
      </div>

      <div class="notice" v-if="indexData && indexData.roll">
        <div class="notice_img">
          <img src="../assets/images/logo_min.png" />
        </div>
        <div class="notice_title"><span>NEWS</span></div>
        <van-swipe
          vertical
          class="notice_swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item
            v-for="item in indexData.roll"
            :key="item.id"
            @touchstart.prevent
          >
            <span class="text">{{ item.info }}</span>
            <van-icon name="arrow" color="#969799" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="recommend" v-if="indexData && indexData.info">
        <div class="info">
          <div class="title">
            <div class="left">
              <h6>快速选择</h6>
              <p>{{ indexData.info.fastInfo }}</p>
            </div>
            <div class="more" @click="$router.push('/category')">
              更多<van-icon name="arrow" color="#969799" />
            </div>
          </div>
          <div class="detail">
            <swiper :options="swiperOption_fastList" class="fastList">
              <swiper-slide
                v-for="item in indexData.info.fastList"
                :key="item.id"
              >
                <router-link
                  class="card"
                  :to="`/productlist?sid=${item.id}&title=${item.cate_name}`"
                >
                  <div class="img">
                    <img :src="item.pic" />
                  </div>
                  <div class="name">{{ item.cate_name }}</div>
                </router-link>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="info">
          <div class="title">
            <div class="left">
              <h6>精品推荐</h6>
              <p>{{ indexData.info.bastInfo }}</p>
            </div>
            <div class="more">
              更多<van-icon name="arrow" color="#969799" />
            </div>
          </div>
          <div class="detail">
            <van-swipe
              class="bastBanner"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item
                v-for="item in indexData.info.bastBanner"
                :key="item.id"
              >
                <img :src="item.img" />
              </van-swipe-item>
            </van-swipe>
            <div class="bastList">
              <ProductItemHor
                v-for="item in indexData.info.bastList"
                :key="item.id"
                :item="item"
              ></ProductItemHor>
            </div>
          </div>
        </div>
        <div class="info">
          <div class="title">
            <div class="left">
              <h6>首发新品</h6>
              <p>{{ indexData.info.firstInfo }}</p>
            </div>
            <div class="more">
              更多<van-icon name="arrow" color="#969799" />
            </div>
          </div>
          <div class="detail">
            <swiper :options="swiperOption_firstList" class="firstList">
              <swiper-slide
                v-for="item in indexData.info.firstList"
                :key="item.id"
              >
                <ProductItem :item="item" :min="true"></ProductItem>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import ProductItemHor from "@/components/ProductItemHor";
import ProductItem from "@/components/ProductItem";
export default {
  name: "Index",
  components: {
    ProductItemHor,
    ProductItem,
  },
  data() {
    return {
      isLoading: false,
      indexData: null,
      swiperOption_fastList: {
        loop: true,
        slidesPerView: "auto", // 自动块宽度
        loopedSlides: "10", // 左右预加载块数
        direction: "horizontal", //滑动方向
        freeMode: true, // 自由滚动模式
        freeModeMomentumRatio: 0.5, // 惯性大小
      },
      swiperOption_firstList: {
        slidesPerView: "auto",
        direction: "horizontal",
        freeMode: true,
        freeModeMomentumRatio: 0.5,
      },
    };
  },
  created() {
    this.getIndexData();
  },
  methods: {
    ...mapMutations(["changeLoading"]),
    getIndexData(callback) {
      this.changeLoading(true);
      this.$axios.get("/api/index").then((d) => {
        console.log("index", d.data);
        this.indexData = d.data.data;
        this.changeLoading(false);
        if (callback) callback();
      });
    },
    onRefresh() {
      this.getIndexData(() => {
        this.isLoading = false;
      });
    },
    jumpSearch() {
      this.$router.push("/search");
    },
  },
};
</script>

<style lang="less" scoped>
.index {
  .logo {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    overflow: hidden;
    width: 100%;
    height: 40px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 40% 40%;
    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        rgba(255, 255, 255, 0.5) 10%,
        rgba(0, 0, 0, 0) 15%,
        rgba(0, 0, 0, 0) 85%,
        rgba(255, 255, 255, 0.5) 90%
      );
      position: relative;
      z-index: 999;
    }
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90px;
    }
  }
  .content {
    background: linear-gradient(#fff 0, rgba(0, 0, 0, 0) 100vh);
    background-attachment: fixed;
    padding-top: 50px;
    min-height: calc(100vh - 50px);
    box-sizing: border-box;
    .search {
      padding-bottom: 5px;
      .van-search {
        background: unset;
      }
    }
    .banner {
      .my-swipe .van-swipe-item {
        img {
          width: 100%;
          height: 148px;
        }
      }
    }
    .menus {
      background: #fff;
    }
    .notice {
      height: 30px;
      background: #fff;
      display: flex;
      padding: 0 15px;
      margin-top: 10px;
      .notice_img {
        flex-shrink: 0;
        padding: 4px 3px;
        height: 30px;
        box-sizing: border-box;
        img {
          height: 100%;
        }
      }
      .notice_title {
        height: 30px;
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          line-height: 14px;
          font-weight: 900;
          font-style: italic;
          color: #555;
          padding-right: 10px;
          border-right: 1px solid #ddd;
          background-image: linear-gradient(
            to right,
            #444 15%,
            rgba(0, 199, 129, 0.8) 70%,
            rgba(0, 0, 0, 0) 90%
          );
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .notice_swipe {
        flex: 1;
        margin-left: 15px;
        .van-swipe-item {
          height: 30px;
          line-height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .text {
            width: 0;
            flex: 1;
            font-size: 12px;
            color: #777;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .van-icon {
            flex-shrink: 0;
            font-size: 13px;
            line-height: 16px;
          }
        }
      }
    }
    .recommend {
      margin-top: 10px;
      .info {
        background: #fff;
        &:not(:first-of-type) .title {
          border-top: 1px solid #eee;
        }
        .title {
          padding-top: 17px;
          margin: 0 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            max-width: 60%;
            h6,
            p {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            h6 {
              color: #282828;
              font-size: 15px;
              font-weight: 700;
              margin-bottom: 2.5px;
            }
            p {
              color: #999;
              font-size: 12px;
            }
          }
          .more {
            color: #333;
            font-size: 13px;
            line-height: 16px;
            display: flex;
            align-items: center;
          }
        }
        .detail {
          padding: 19px 15px;
          .fastList {
            background: #fdfdfe;
            border-radius: 5px;
            .swiper-slide {
              margin-right: 10px;
              width: auto !important;
              .card {
                background: #fff;
                width: 85px;
                display: block;
                overflow: hidden;
                border-radius: 5px 5px 0 0;
                box-shadow: 0px 7.5px 7.5px -5px #aaa;
                border-bottom: 2.5px solid #ccc;
                color: inherit;
                .img {
                  width: 100%;
                  padding-bottom: 100%;
                  position: relative;
                  img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                }
                .name {
                  text-align: center;
                  line-height: 25px;
                  font-size: 12px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
          .bastBanner {
            .van-swipe-item {
              img {
                width: 100%;
                height: 126px;
                object-fit: cover;
              }
            }
          }
          .firstList {
            .swiper-slide {
              margin-right: 10px;
              width: auto !important;
              .productItem {
                width: 120px;
              }
            }
          }
        }
      }
    }
  }
}
</style>